<template>
  <div id="profile">
    <div id="upper">
      <div class='profile-back' >
        <div @click="backClick">
          <van-icon name="arrow-left" size="30" color="white"/>
        </div>
      </div>
      <div id="show-user-img">
        <div id="user-img" >
        <van-icon :name="userInfo == null ? 'contact':userInfo.bigPic " color="white" size="80" class="profile-user-icon"/>
        </div>
      </div>
      <div class="log-in-control">
        <div>
          <van-button plain type="info" class="log-in" 
            color="white" @click="logInClick" v-if="this.userInfo == null">立即登录</van-button>
          <div class="userInfo-username" v-else>{{userInfo.username}}</div>
        </div>
      </div>
    </div>
    
    <div class="lower">
      <div @click="userMessage">个人信息</div>
      <div @click="$router.push({path: '/collect'})">我的收藏</div>
      <div @click="$router.push({path: '/examResult'})">测试结果</div>
      <div @click="$router.push({path: '/pubExam'})">公开测试</div>
      <div @click="logout">退出登录</div>
    </div>


  </div>
</template>
<script>
import Vue from 'vue';
import { Icon, Toast } from 'vant';
import { Button,Dialog } from 'vant'; 
import axios from 'axios'
import netPath from '../../network/networkPath'

Vue.use(Button);
Vue.use(Icon);
Vue.use(Toast);
Vue.use(Dialog);


export default {
  name: 'Profile',
  data() {
    return {
      message: '123'
    }
  },
  computed:{
    userInfo: function(){
      // 返回vuex中或本地缓存中的数值，二者其一即可
      let userInfo = JSON.parse(localStorage.getItem("userInfo"))
        return userInfo
    }
  },
  methods: {
    logInClick(){
      this.$router.push({
        path: '/login'
      })
      if(this.$store.state.isShow ==true){
        this.$store.state.isShow = false
      }
      
    },
    backClick(){
      this.$router.back()
      if(this.$store.state.isShow == false){
        this.$store.state.isShow = true
      }
    },
    // 退出登录
    logout(){
      Toast.loading({
        message: '退出登录中...',
        forbidClick: true,
        duration: 1
      });
      axios.post(`${netPath.baseURL}/api/user/logout`).then(res=>{
        if(res.data.code == 105){
            Toast("退出登录成功!")
        } else{
          Toast(res.data.message)
        }
        localStorage.clear()
        this.$router.go(0)
      }).catch(err=>{
        Toast(err)
      })
    },
    // 查看个人信息
    userMessage(){
      if(this.userInfo == null){
        Toast('您还未登录无法查看个人信息!')
      } else {
        Dialog.alert({
        title: '您的个人信息如下',
        message: `用户名:${this.userInfo.username}\n性别:${this.userInfo.sex==1?'男':'女'}\n年龄:${this.userInfo.age}\n邮箱:${this.userInfo.email}`,
        })
      }
    }
  },
}
</script>

<style scoped lang="less">
#upper{
  background-color: rgb(0, 162, 255);
  width: 100%;
  height: 30vh;
}
.profile-back{
  width: 100%;
  height: 44px;
}
.profile-back div{
  width: 44px;
  position: absolute;
  height: 44px;
  padding-top: 5px;
  padding-left: 0px;

}
#show-user-img{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
#user-img{
  width: 80px;
  height: 80px;
  border-radius: 30px;
}
.profile-user-icon{
  line-height: 60px;
}
#log-in-btn{
  width: 100%;
  height: 60px;
  padding-top: 40px;

}
.log-in-control{
  padding: 20px;
}
.log-in{
  background-color: rgb(0, 162, 255);
}
.userInfo-username{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  color: #ffffff;
}

.lower{
  position: absolute;
  top: 35vh;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 50vh;
  background-color: #efefef;
  padding: 0 10px;
  div{
    height: 20px;
    padding: 10px;
    background-color: #fff;
    margin-top: 10px;
  }
}
</style>